<template>
  <form action="" method="post">
    <table>
      <tr>
        <td>账号</td>
        <td><input type="text" v-model="username"></td>
      </tr>
      <tr>
        <td>密码</td>
        <td><input type="text" v-model="password"></td>
      </tr>
      <tr>
        <td>性别</td>
        <td>
          <input type="radio" id="sex" value="0" v-model="sex" />
          <label for="sex">男</label>
          <input type="radio" id="sex" value="1" v-model="sex" />
          <label for="sex">女</label>
        </td>
      </tr>
      <tr>
        <td>水平</td>
        <td>
          <select v-model="level">
            <option value="1">初级</option>
            <option value="2">中级</option>
            <option value="3">高级</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>兴趣</td>
        <td>
          <input type="checkbox" id="Java" value="Java" v-model="hobbies" />
          <label for="Java">Java</label>
          <input type="checkbox" id="C#" value="C#" v-model="hobbies" />
          <label for="C#">C#</label>
          <input type="checkbox" id="PHP" value="PHP" v-model="hobbies" />
          <label for="PHP">PHP</label>
        </td>
      </tr>
      <tr>
        <td>备注</td>
        <td><textarea v-model="comment" /></td>
      </tr>
    </table>
    <h1>-----------------------</h1>
    你所选择的内容是：<br />
    账号:{{username}}<br />
    密码:{{password}}<br />
    性别:{{sex}}<br />
    水平:{{level}}<br />
    兴趣:{{hobbies}}<br />
    备注:{{comment}}<br />
  </form>
</template>

<script>
export default {
  data(){
    return{
      username: '',
      password: '',
      sex: '',
      level: '',
      hobbies: [],
      comment: ''
    }
  }
}
</script>

<style scoped>

</style>